<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <span class="filter-label">工号：</span>
        <el-input 
          v-model="filter.workId" 
          placeholder=""
          style="width: 100px"
          class="filter-item"
          clearable 
        />
        <span class="filter-label" style="margin-left: 15px">作者：</span>
        <el-input 
          v-model="filter.author" 
          placeholder=""
          style="width: 100px; margin-left: 10px"
          class="filter-item"
          clearable 
        />
        <span class="filter-label" style="margin-left: 15px">主题：</span>
        <el-input 
          v-model="filter.title" 
          placeholder=""
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable 
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>
 
      <!-- 数据表格 -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="workId" label="工号" width="80" align="center"/>
        <el-table-column prop="author" label="作者" width="120"/>
        <el-table-column prop="date" label="发布时间" width="120"/>
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-link 
              type="primary" 
              :underline="false"
              style="margin-left: 10px"
              @click="handleEdit(scope.row)" 
            >
              编辑 
            </el-link>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。
      </div>
    </el-card>
 
    <!-- 详情对话框 -->
    <el-dialog 
      title="通知详情"
      v-model="detailDialogVisible"
      width="50%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ currentNotice.id  }}</el-descriptions-item>
        <el-descriptions-item label="主题">{{ currentNotice.title  }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ currentNotice.workId  }}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ currentNotice.author  }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ currentNotice.date  }}</el-descriptions-item>
        <el-descriptions-item label="通知内容">
          <div style="white-space: pre-line;">{{ currentNotice.content  || '无具体内容' }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
 
    <!-- 编辑对话框 -->
    <el-dialog 
      :title="isEdit ? '编辑通知' : '新增通知'"
      v-model="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formRef" 
        label-width="80px"
      >
        <el-form-item label="主题" prop="title">
          <el-input v-model="form.title"  placeholder="请输入通知主题"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="workId">
          <el-input v-model="form.workId"  placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author"  placeholder="请输入作者"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="date">
          <el-date-picker 
            v-model="form.date" 
            type="datetime"
            placeholder="选择发布时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input 
            type="textarea"
            :rows="4"
            v-model="form.content" 
            placeholder="请输入通知内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
 
// 过滤条件 
const filter = reactive({
  workId: '',
  author: '',
  title: ''
})
 
// 表格数据 
const tableData = ref([
  {
    id: 7,
    title: '系统升级通知',
    workId: '1001',
    author: '管理员',
    date: '2023-05-10',
    content: '系统将于本周六凌晨2:00-4:00进行升级维护，届时系统将无法访问，请提前做好工作安排。'
  },
  {
    id: 8,
    title: '紧急会议通知',
    workId: '1002',
    author: '人事部',
    date: '2023-05-15',
    content: '今天下午3点在会议室A召开紧急会议，请各部门负责人准时参加。'
  },
  {
    id: 9,
    title: '节假日安排',
    workId: '1003',
    author: '行政部',
    date: '2023-04-28',
    content: '五一劳动节放假安排：4月29日至5月3日放假调休，共5天。'
  },
  {
    id: 10,
    title: '考勤制度更新',
    workId: '1001',
    author: '管理员',
    date: '2023-03-01',
    content: '即日起执行新的考勤制度，请全体员工认真阅读并遵守相关规定。'
  }
])
 
// 过滤后的数据 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (filter.workId  === '' || item.workId.includes(filter.workId))  &&
      (filter.author  === '' || item.author.includes(filter.author))  &&
      (filter.title  === '' || item.title.includes(filter.title)) 
    )
  })
})
 
// 对话框状态 
const detailDialogVisible = ref(false)
const editDialogVisible = ref(false)
const isEdit = ref(false)
 
// 当前通知 
const currentNotice = ref({})
 
// 表单数据和校验规则 
const form = reactive({
  id: '',
  title: '',
  workId: '',
  author: '',
  date: '',
  content: ''
})
 
const rules = reactive({
  title: [
    { required: true, message: '请输入通知主题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  workId: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  author: [
    { required: true, message: '请输入作者', trigger: 'blur' }
  ],
  date: [
    { required: true, message: '请选择发布时间', trigger: 'change' }
  ]
})
 
// 表单引用 
const formRef = ref(null)
 
// 搜索 
const handleSearch = () => {
  ElMessage.success(' 搜索完成')
}
 
// 重置搜索 
const resetSearch = () => {
  filter.workId  = ''
  filter.author  = ''
  filter.title  = ''
}
 
// 显示详情 
const showDetail = (row) => {
  currentNotice.value  = { ...row }
  detailDialogVisible.value  = true 
}
 
// 编辑通知 
const handleEdit = (row) => {
  isEdit.value  = true 
  Object.assign(form,  JSON.parse(JSON.stringify(row))) 
  editDialogVisible.value  = true 
}
 
// 新增通知 
const handleAdd = () => {
  isEdit.value  = false 
  editDialogVisible.value  = true 
}
 
// 对话框关闭 
const handleDialogClosed = () => {
  if (formRef.value)  {
    formRef.value.resetFields() 
  }
  Object.assign(form,  {
    id: '',
    title: '',
    workId: '',
    author: '',
    date: '',
    content: ''
  })
}
 
// 提交表单 
const submitForm = async () => {
  try {
    await formRef.value.validate() 
    
    if (isEdit.value)  {
      // 编辑模式 - 更新数据 
      const index = tableData.value.findIndex(item  => item.id  === form.id) 
      if (index !== -1) {
        tableData.value.splice(index,  1, { ...form })
        ElMessage.success(' 修改成功')
      }
    } else {
      // 新增模式 - 添加数据 
      const newId = tableData.value.length  > 0 
        ? Math.max(...tableData.value.map(item  => item.id))  + 1 
        : 1 
      tableData.value.unshift({ 
        ...form,
        id: newId 
      })
      ElMessage.success(' 新增成功')
    }
    editDialogVisible.value  = false 
  } catch (error) {
    console.error(' 表单验证失败:', error)
  }
}
</script>
 
<style scoped>
.notice-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-label {
  color: #606266;
  font-size: 14px;
}
 
.filter-item {
  margin-left: 5px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
 
.el-link {
  font-size: 13px;
  padding: 0 5px;
  cursor: pointer;
}
 
/* 对话框样式调整 */
.el-dialog__body {
  padding: 20px;
}
 
.el-descriptions {
  margin-top: -20px;
}
 
.el-descriptions-item__label {
  width: 100px;
}
</style>